<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <link rel="stylesheet" href="../common/css/coommon.css" />
    <style>
      .td {
        height: 99px !important;
      }
      .filter {
        display: flex;
      }
      .filter .input {
        display: flex;
        flex: auto;
        flex-wrap: wrap;
        position: relative;
      }
      .filter .input:after {
        content: "";
        display: inline-block;
        position: absolute;
        right: 3vw;
        top: 0;
        width: 1px;
        height: 80px;
        background: #e5e6eb;
        opacity: 1;
      }
      .filter .input label {
        white-space: nowrap;
      }
      .select-group {
        margin-right: 7.2917vw;
      }
      .input-group {
        width: auto;
        margin-right: 7.2917vw;
        margin-bottom: 1.0417vw;
      }
      .filter .btn {
        width: 8.8542vw;
        flex-shrink: 0;
      }
    </style>
  </head>
  <body>
    <div class="common" id="app">
      <div class="card_02">
        <div>
          <button class="button_primary">我的待审批</button>
          &ensp;
          <button class="button_primary_plain">审批完成</button>
        </div>
        <br />
        <div class="filter">
          <div class="input">
            <div class="select-group">
              <label>审批类型</label>
              <div class="options">
                <input placeholder="请选择审批类型" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
            <div class="input-group">
              <label>审批项目</label>
              <input placeholder="请输入审批项目" />
            </div>
            <div class="input-group">
              <label>申请人</label>
              <input placeholder="请输入申请人" />
            </div>
            <div class="input-group">
              <label>申请时间</label>
              <input placeholder="请输入申请人" />
            </div>
          </div>
          <div class="btn">
            <button class="button_primary button_icon">
              <i class="bi bi-search btnIcon"></i>搜索
            </button>
            <br />
            <button class="button_primary_plain button_icon">
              <i class="bi bi-arrow-clockwise btnIcon"></i>重置
            </button>
          </div>
        </div>
        <br />
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td center" style="width: 15%">序号</div>
              <div class="td center" style="width: 15%">项目名称</div>
              <div class="td center" style="width: 15%">审批类型</div>
              <div class="td center" style="width: 15%">申请人</div>
              <div class="td center" style="width: 15%">申请时间</div>
              <div class="td center" style="width: 15%">审批人</div>
              <div class="td center" style="width: 15%">当前审批人</div>
              <div class="td center" style="width: 15%">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr" v-for="item in 5">
              <div class="td center" style="width: 15%">1</div>
              <div class="td center" style="width: 15%">项目名称</div>
              <div class="td center" style="width: 15%">采购清单审批</div>
              <div class="td center" style="width: 15%">李炯泽</div>
              <div class="td center" style="width: 15%">
                2023-05-05 13:45:06
              </div>
              <div class="td center" style="width: 15%">
                1级审批人：王婷婷 <br />
                2级审批人：李鑫宇 <br />
                3级审批人：李姝静
              </div>
              <div class="td center" style="width: 15%">Token</div>
              <div class="td center" style="width: 15%">
                <button class="button_success_text">审批</button>
                &ensp;
                <button class="button_primary_text">查看</button>
              </div>
            </div>
          </div>
          <div class="pageTotal">
            <div class="pagination">
              <span>共 {{total}} 条</span>
              <ul>
                <li @click="shang"><i class="bi bi-chevron-left"></i></li>
                <li
                  v-show="start > 0"
                  @click="()=>{
                      if(start > 0){
                        params.page = start;
                        end-=3
                        start-=3
                      }
                    }"
                >
                  ...
                </li>
                <li
                  @click="onCurrentPage(item)"
                  v-for="item in totalPage"
                  v-show="item < end && item > start"
                  :class="[item == params.page ? 'active' :'']"
                >
                  {{item}}
                </li>
                <li
                  v-show="end <= totalPage"
                  @click="()=>{
                      if(end <= totalPage){
                      params.page = end;
                      end+=3
                      start+=3
                      }
                    }"
                >
                  ...
                </li>
                <li @click="next"><i class="bi bi-chevron-right"></i></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./less.js"></script>
  <script src="../common/js/vue.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          total: 100,
          totalPage: 10,
          start: 0,
          end: 4,
          list: [],
          params: {
            page: 1,
            limit: 10,
          },
        };
      },
      //所有函数都写在这里
      methods: {
        // 列表状态切换
        statusChange(item, index) {
          this.statusActive = index;
        },
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
          this.list = [
            {
              value: "吴恒",
            },
          ];
        },
      },
    }).mount("#app");
  </script>
</html>
